<template>
  <div class="add">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="nav">
          <div class="title">产品类型列表</div>
          <div class="tree">
            <TreeProduct @sendTreeData="sendTreeData" />
          </div>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="wrapper">
          <div class="my-title">商品{{ title }}</div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="所属分类" prop="category">
              <span>{{ ruleForm.category }}</span>
            </el-form-item>
            <el-form-item label="商品名称" prop="title">
              <el-input v-model="ruleForm.title" size="small"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="price">
              <el-input v-model="ruleForm.price" size="small"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="num">
              <el-input v-model="ruleForm.num" size="small"></el-input>
            </el-form-item>
            <el-form-item label="商品卖点" prop="sellPoint">
              <el-input v-model="ruleForm.sellPoint" size="small"></el-input>
            </el-form-item>
            <el-form-item label="上传图片" prop="image">
              <UploadImg
                ref="uploadImg"
                @sendImg="sendImg"
                :fileList="fileList"
              ></UploadImg>
            </el-form-item>
            <el-form-item label="商品描述" prop="descs">
              <WangEditor
                @sendWangEditor="sendWangEditor"
                ref="wangEditor"
              ></WangEditor>
            </el-form-item>
            <el-form-item label="首页轮播推进" prop="isShow">
              <el-switch
                v-model="ruleForm.isShow"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </el-form-item>
            <el-form-item label="是否推荐商品" prop="isShow">
              <el-switch
                v-model="ruleForm.isShow"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </el-form-item>
            <el-form-item label="是否上架商品" prop="isShow">
              <el-switch
                v-model="ruleForm.isShow"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </el-form-item>

            <el-form-item>
              <el-button
                v-show="title != '详情'"
                type="primary"
                @click="submitForm('ruleForm')"
                >保存</el-button
              >
              <el-button v-show="title != '详情'" @click="resetForm('ruleForm')"
                >重置</el-button
              >
              <el-button @click="closePage">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import TreeProduct from "./TreeProduct.vue";
import UploadImg from "./uploadingImg.vue";
import WangEditor from "./WangEditor.vue";
import { addGoodsList, updateTbItem } from "@/http/index.js";
import { mapState } from "vuex";
export default {
  name: "addProduct",
  components: {
    TreeProduct,
    UploadImg,
    WangEditor,
  },
  computed: {
    ...mapState("product", ["rowState", "title"]),
  },
  data() {
    return {
      fileList: [], //图片容器集合
      ruleForm: {
        //表单数据
        id: "",
        title: "",
        num: "",
        price: "",
        sellPoint: "",
        image: [],
        descs: "",
        category: "",
        cid: "",
        isShow: true,
      },
      rules: {
        //表单验证规则
        title: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        num: [{ required: true, message: "请输入商品数量", trigger: "blur" }],
        price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
        category: [
          {
            required: true,
            message: "请选择商品类目",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    sendTreeData(data) {
      console.log(data, "传过来了没有");
      this.ruleForm.category = data.name;
      this.ruleForm.cid = data.cid;
    },
    sendImg(val) {
      this.ruleForm.image.push(val);
      console.log(this.ruleForm.image, "最终传过来的图片");
    },
    sendWangEditor(val) {
      console.log(val, "--说是富文本我看看怎么个是--");
      this.ruleForm.descs = val;
    },
    //提交事件-------------------------------
    submitForm(formName) {
      //this.$refs.ruleForm
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let {
            id,
            title,
            image,
            sellPoint,
            price,
            cid,
            category,
            num,
            descs,
          } = this.ruleForm;
          if (this.title == "添加") {
            //接口：title, image, sellPoint, price, cid, category, num, descs

            addGoodsList({
              title,
              image: JSON.stringify(image),
              sellPoint,
              price,
              cid,
              category,
              num,
              descs,
            })
              .then((res) => {
                console.log(res, "上传列表的接口你");
                if (res.data.status == 200) {
                  this.$message({
                    message: "恭喜你，添加商品成功了",
                    type: "success",
                  });
                  // 路由的跳转
                  this.$router.push({
                    name: "goodsList",
                  });
                }
              })
              .catch((err) => {
                console.log(err, "错误的返回信息");
              });
          } else {
            updateTbItem({
              id,
              title,
              image: JSON.stringify(image),
              sellPoint,
              price,
              cid,
              category,
              num,
              descs,
            }).then((res) => {
              if (res.data.status == 200) {
                this.$message({
                  message: "恭喜你，修改商品成功了",
                  type: "success",
                });
                // 路由的跳转
                this.$router.push({
                  name: "goodsList",
                });
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //重置的事件
    resetForm(formName) {
      if (this.title == "添加") {
        this.$refs[formName].resetFields();
        this.$refs.uploadImg.clear();
        this.$refs.wangEditor.html = ""; //方法1

        console.log(
          this.$refs.uploadImg,
          this.$refs.wangEditor.html,
          "这个里面是重置ref的内容"
        );
      } else {
        this.ruleForm = JSON.parse(JSON.stringify(this.rowState));
        this.ruleForm.isShow = true;

        this.ruleForm.image = JSON.parse(this.rowState.image);
        console.log(this.ruleForm.image, "啥玩意儿啊");
        this.fileList = [];
        this.fileList = this.ruleForm.image.map((item) => {
          return {
            url: item,
          };
        });
        console.log("this.fileList---", this.fileList);
        //this.$nextTick() 等待DOM加载完毕执行 延迟加载
        this.$nextTick(() => {
          this.$refs.wangEditor.html = this.rowState.descs;
        });
      }

      // this.$refs.wangEditor.editor.clear();//方法2 调用自身的清空方法
    },

    // 取消的事件
    closePage() {
      this.$router.push({
        name: "goodsList",
      });
    },
  },
  created() {},
  mounted() {
    if (this.title == "编辑" || this.title == "详情") {
      this.ruleForm = JSON.parse(JSON.stringify(this.rowState));
      this.ruleForm.isShow = true;

      this.ruleForm.image = JSON.parse(this.rowState.image);
      console.log(this.ruleForm.image, "啥玩意儿啊");
      this.fileList = this.ruleForm.image.map((item) => {
        return {
          url: item,
        };
      });
      // console.log("this.fileList---", this.fileList);
      // //this.$nextTick() 等待DOM加载完毕执行 延迟加载
      // this.$nextTick(() => {
      //   this.$refs.wangEditor.html = this.rowState.descs;
      // });
    }
  },
};
</script>
<style lang="scss" scoped>
.add {
  // padding: 10px 5px;
  margin: 10px;
}
.nav {
  // margin: 10px;
  height: 600px;
  background: #fff;
  // padding: 10px 5px;
  .title {
    background: skyblue;
    padding: 20px;
    color: #fff;
  }

  .tree {
    padding: 20px;
  }
}

.wrapper {
  // height: 800px;
  background: #fff;

  .my-title {
    background: #eee;
    padding: 14px;
    color: #333;
    font-weight: bold;
  }

  .demo-ruleForm {
    padding: 20px;
  }
}
</style>
